<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:19:37
-->
<template>
  <div id="container1" style="width: 100%; height: 100%"></div>
</template>
<script>
// 导入图表构造函数
import { Pie } from "@antv/g2plot";
import { onMounted } from "vue";
export default {
  setup() {
    // 模拟数据
    const data = [
      { type: "TSP", value: 27 },
      { type: "PM10", value: 25 },
      { type: "PM2.5", value: 18 },
      { type: "Noise", value: 15 },
      { type: "wind_speed", value: 10 },
      { type: "wind_direction", value: 5 },
    ];
    // 声明初始化图表的方法
    function loadPie() {
      const piePlot = new Pie("container1", {
        appendPadding: 10,
        data,
        angleField: "value",
        colorField: "type",
        radius: 0.9,
        label: {
          type: "inner",
          offset: "-30%",
          content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
          style: {
            fontSize: 14,
            textAlign: "center",
          },
        },
        legend: {
          itemName: {
            style: {
              fill: "white",
            },
          },
        },
        pieStyle: {
          stroke: "black",
          lineOpacity: 1,
        },
        interactions: [{ type: "element-active" }],
      });

      piePlot.render();
    }

    onMounted(() => {
      loadPie();
    });
  },
};
</script>
